Revision:
Intrinsic web design is a modern methodology that allows web content to adapt naturally to various screen sizes, from mobile to desktop.
It uses CSS grid and flexbox to resize and rearrange elements fluidly based on available space.
Modern CSS -- clamp(), min(), max(), Grid minmax(), viewport units, aspect-ratio -- enables truly fluid, query-free responsiveness.
<style>
:root { --fs-h1: clamp(1.8rem, 5vw + 1rem, 3.5rem); --fs-body: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--space-sm: clamp(0.75rem, 2vw, 1.25rem); --space-lg: clamp(1.5rem, 5vw, 3rem);
}
h1 { font-size: var(--fs-h1); }
body { font-size: var(--fs-body); padding: var(--space-lg); }
.card { padding: var(--space-sm); }
</style>
Scales smoothly across all viewports and respects user font preferences (uses "rem" base)
<style>
.grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(clamp(280px, 90%, 400px), 1fr) /* adapts columns fluidly */); gap: var(--space-sm); }
/* auto-fit: fills available space; */
/* minmax(): sets flexible column constraints; */
/* clamp() inside minmax(): prevents awkwardly narrow/wide columns */
</style>
No breakpoints needed. Columns auto-adjust.
<style>
.container { width: min(100% - 2rem, 1200px); /* Max 1200px, shrinks on mobile */ margin-inline: auto; padding-inline: clamp(1rem, 5%, 2rem) }
/* Fluid max-width for images/media */
img, video { max-width: 100%; height: auto;}
</style>
<style>
.hero { padding-block: clamp(3rem, 15vh, 8rem); /* Height scales with viewport */ text-align: center; }
.hero-title { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.1; }
</style>
<style>
.nav-list { display: flex; flex-wrap: wrap; /* Wraps items naturally */ gap: clamp(0.5rem, 2vw, 1rem); justify-content: center; }
.nav-item { flex: 1 0 clamp(100px, 25%, 200px); /* Grows/shrinks within limits */}
</style>
No JavaScript toggle needed. Items reflow gracefully on resize
<style>
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; padding: clamp(1rem, 5vw, 2rem); }
.card { border-radius: clamp(8px, 2vw, 16px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover;}
.card h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); padding: clamp(0.75rem, 3vw, 1.25rem) clamp(1rem, 4vw, 1.5rem);}
</style>
- accepts three values: the minimum, ideal, and maximum values.
- the trick with clamp() is in that ideal value, whereem a dynamic unit such as "view width" must be used to trigger the transition between the "min" and "max".
code:
font-size: clamp(1rem, 4vw, 3rem);
Based on the current computed value of "4vw", the font-size will adjust as the viewport grows and shrinks. But it will never be smaller than "1rem" or larger than "3rem".
- enable to provide context-dependent options.
- both "min()" and "max()" accept two or more values.
- for the "min()" function, the browser will use the smallest computed value. br - for "max()" function the browser will use the largest computed value.
- another feature of "min", "max", and "clamp" is that we can perform additional calculations without needing a nested calc() function.
code:
min(100vw - 3rem, 80ch)
.container { width: min(100vw - 3rem, 80ch); margin-inline: auto;}
.container { width: min(100vw - 3rem, var(--container-max, 80ch) ); margin-inline: auto;}
- "fit-content", "min-content", and "max-content" allow intrinsic sizing. Support for these keywords is best when paired with the "width" property.
- fit-content grows just large enough to contain its contents;
- min-content only grows large enough to match the width of the longest word and will apply soft-wrapping;
- max-content will continue growing as large as its contents require.
- CSS grid is the perfect toolset for achieving flexibility within constraints.
code:
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
- repeat() defines a recurring pattern to use for the specified grid tracks;
- auto-fit means to create as many tracks as will fit, according to the next part of the definition;
- minmax() is a CSS grid function that defines a range of values that will be used to compute each track size where the first value is the minimum and the second value is the maximum
- the properties involved in spacing - gap, padding, and margin - have different purposes.
-padding : is for handling individual box spacing. Percents used with padding are calculated relative to the element's inline size, so as for clamp(), a percentage can be used as an element-relative dynamic value.
code:
:root {
--padding-sm: clamp(1rem, 3%, 1.5rem);
--padding-md: clamp(1.5rem, 6%, 3rem);
--padding-lg: clamp(3rem, 12%, 6rem);
}
- margin : can be used for block layout spacing or vertical spacing. The "min()" function can be used with "viewport units" and "rem" for margin. Viewport units will allow creating contextual spacing.
code:
.block-flow { margin-block-start: min(4rem, 8vh);}
code:
:root {
--block-flow-sm: min(2rem, 4vh);
--block-flow-md: min(4rem, 8vh);
--block-flow-lg: min(8rem, 16vh);
}
- gap : is considered for layout component spacing. "gap" is applied between elements
code:
gap: clamp(1.5rem, 6vmax, 3rem);
code:
:root {
--layout-gap-sm: clamp(1rem, 3vmax, 1.5rem)
--layout-gap-md: clamp(1.5rem, 6vmax, 3rem);
--layout-gap-lg: clamp(3rem, 8vmax, 4rem);
}